<template>
  <text>
    <text v-for="(item, i) in list" :key="i"
          class="text-common"
          :class="[item===keywords? 'keyword-text':'']" :style="item===keywords?textKeywordStyle:textCommonStyle">{{item}}</text>
  </text>
</template>

<script>
export default {
  name: "KeywordText",
  // props: ['content', 'keywords'],
  props:{
    content:String,
    keywords:String,
    textCommonStyle:{
      type:String,
      default:''
    },
    textKeywordStyle:{
      type:String,
      default:''
    }

  },
  computed: {
    list() {
      const arr = this.content.split(this.keywords)
      const list = []
      arr.map((item, i) => {
        if (item) {
          list.push(item)
        }
        if (i !== arr.length - 1) {
          list.push(this.keywords)
        }
      })
      // console.log(list)
      return list
    }
  },
  methods:{
  }
}
</script>

<style lang="scss">
.text-common{
  color: #000000;
  font-size: 30upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 49upx;
}
.keyword-text{
  color: #FF5D40;
}
</style>